<template>
   <view
      id="countdown"
      class="countdown"
   >
      <view v-if="!isFinished">
         <text v-if="years != '00'">{{ years }} 年</text>
         <text v-if="months != '00'">{{ months }} 月</text>
         <text v-if="days != '00'">{{ days }} 日</text>
         <text v-if="hours != '00'">{{ hours }} 时</text>
         <text v-if="minutes != '00'">{{ minutes }} 分</text>
         <text v-if="seconds != '00'">{{ seconds }} 秒</text>
      </view>
      <text v-else>{{ finishText }}</text>
   </view>
</template>

<script>
   export default {
      name: "zfy-countdown",
      props: {
         targetTimestamp: {
            type: [Number, String],
            default: 1723237666,
         },
         finishText: {
            type: String,
            default: "授权过期",
         },
      },
      data() {
         return {
            timeStr: "",
            years: 0,
            months: 0,
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
            interval: null,
            isFinished: false,
         };
      },
      mounted() {
         // 组件挂载后开始倒计时
         this.startCountdown();
      },
      beforeDestroy() {
         this.stopCountdown();
      },
      // 兼容 Vue3
      beforeUnmount() {
         this.stopCountdown();
      },
      watch: {
         targetTimestamp: {
            handler(newVal) {
               this.timeStr = newVal;
               this.startCountdown();
               console.log(newVal);
            },
            immediate: true,
         },
      },
      methods: {
         formatTime(time) {
            return time < 10 ? "0" + time : time;
         },
         startCountdown() {
            // 先清除之前的定时器，避免重复创建
            this.stopCountdown();
            // 立即执行一次更新
            this.updateCountdown();
            // 如果未完成，启动定时器
            if (!this.isFinished) {
               this.interval = setInterval(() => {
                  this.updateCountdown();
               }, 1000);
            }
         },
         updateCountdown() {
            const now = new Date().getTime();
            const target = this.timeStr * 1000; // 将时间戳转换为毫秒
            const difference = target - now;

            if (difference <= 0) {
               this.years = 0;
               this.months = 0;
               this.days = 0;
               this.hours = 0;
               this.minutes = 0;
               this.seconds = 0;
               this.isFinished = true;
               this.stopCountdown();
               return;
            }

            const years = Math.floor(difference / (1000 * 60 * 60 * 24 * 365));
            const months = Math.floor((difference % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30));
            const days = Math.floor((difference % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24));
            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((difference % (1000 * 60)) / 1000);

            this.years = this.formatTime(years);
            this.months = this.formatTime(months);
            this.days = this.formatTime(days);
            this.hours = this.formatTime(hours);
            this.minutes = this.formatTime(minutes);
            this.seconds = this.formatTime(seconds);
         },
         stopCountdown() {
            clearInterval(this.interval);
            this.interval = null;
            this.$emit("stopCountdown");
         },
      },
   };
</script>

<style lang="scss">
   .countdown {
      display: flex;
   }
</style>
